<template>
    <!-- 需要内嵌的页面都放这里 -->
    <el-container>
        <el-aside style="width: inherit;">
            <el-menu :collapse="isCollapse" router @select="handleSelect" :default-active="router.currentRoute.value.path"
                :unique-opened="true">
                <!-- <el-sub-menu index="/desktop">
                    <template #title>
                        <IconCom icon="house"></IconCom>
                        <span>我的主页</span>
                    </template>
                    <el-menu-item index="/test">
                        <IconCom icon="wallet"></IconCom>
                        <span>测试页面</span>
                    </el-menu-item>
                    <el-menu-item index="/">
                        <IconCom icon="wallet"></IconCom>
                        <span>工作台</span>
                    </el-menu-item>
                    <el-menu-item index="/person">
                        <IconCom icon="monitor"></IconCom>
                        <span>个人信息</span>
                    </el-menu-item>
                </el-sub-menu> -->
                <TreeMenu :obj="item" :key="item.Index" v-for="item in list"></TreeMenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <HeaderCom></HeaderCom>
                <!-- <IconCom icon="Expand"></IconCom> -->
            </el-header>
            <el-main><router-view></router-view></el-main>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import { Ref, ref, computed, onMounted } from 'vue';
import router from '../../router';
import useStore from '../../store/index'
import TreeModel from '../../class/TreeModel'
import TreeMenu from '../../components/TreeMenu.vue'
import HeaderCom from '../../components/HeaderCom.vue'
import { handleSelect } from '../../tools/index'
// const list: Array<TreeModel> = [
//     {
//         "Id": "1",
//         "MenuName": "菜单管理",
//         "Index": "/menu",
//         "FilePath": "",
//         "Order": 0,
//         "children": [
//             {
//                 "Id": "11",
//                 "MenuName": "菜单列表",
//                 "Index": "/menu",
//                 "FilePath": "menu.vue",
//                 "Order": 0,
//                 "children": []
//             }
//         ]
//     },
//     {
//         "Id": "2",
//         "MenuName": "角色管理",
//         "Index": "/role",
//         "FilePath": "",
//         "Order": 0,
//         "children": [
//             {
//                 "Id": "21",
//                 "MenuName": "角色列表",
//                 "Index": "/role",
//                 "FilePath": "role.vue",
//                 "Order": 0,
//                 "children": [],
//             }
//         ]
//     },
//     {
//         "Id": "3",
//         "MenuName": "用户管理",
//         "Index": "/user",
//         "FilePath": "",
//         "Order": 0,
//         "children": [
//             {
//                 "Id": "31",
//                 "MenuName": "用户列表",
//                 "Index": "/user",
//                 "FilePath": "user.vue",
//                 "Order": 0,
//                 "children": []
//             }
//         ]
//     }
// ]
const list: Ref<Array<TreeModel>> = ref<Array<TreeModel>>([])
const load = () => {
    list.value = useStore().UserMenus
}
onMounted(() => load())
const isCollapse = computed(() => useStore().isCollapse)
</script>
